Átvettük az előző lapon a táblázatok készítésének alapjait. Érdekes módon a HTML nem elsősorban formázott adatmegjelenítésre használja a táblázatokat (arra is!), sokkal inkább a weblapon megjelenő információk tagolására, igazítására. Ezt támasztja alá az align és a valign is, ahogy azt már az előzőekben láthattuk. Ezt szem előtt tartva lássuk a táblázatok "ínyenc" részét, ismerkedjünk meg a cellák egyesítését és a cellák egymáshoz való viszonyát meghatározó attribútumokkal.

<TABLE> extra attribútumleírás

cellpadding	A cellákon belüli margó méretét állíthatod be vele. Figyeld meg az előző példákban, hogy egyik alkalommal sem szorult a szöveg a cella széléhez, mindenhol látható volt egy margó (minden irányban!).
cellspacing	A cellák egymástól való távolsága. Másképpen a rácsvonalak szélességének is tekinthető.

Nézzük át a <TD> tag extra attribútumait is:

<TD> extra attribútumleírás

colspan	Cellák vízszintes összefűzését tudjuk vele elvégezni. Paramétere azt adja meg, hogy hány cella legyen összefűzve.
rowspan	Függőleges összefűzés, paramétere azt adja vissza, hány egymás alatt levő cellát kell összefűzni.
	Fontos megjegyezni, hogy a <TD> helyett használhatjuk a TABLE HEADER, azaz <TH> tag-et is, amelynek segítségével fejlécet készíthetünk a táblázatunknak. Igazából különbség nem nagyon van, csupán félkövérré válnak a karakterek, és középre igazítódik a paragrafus.

Kis képi magyarázat, mivel egy kép többet ér ezer szónál (néha!):

Ne vegye el a kedvünket, ha nem teljesen érthető a fenti négy attribútum, nem egyszerűek. Mint minden, csak sok munka és ismétlés útján szerezhető belőle megfelelő gyakorlat. Akkor gyakoroljunk egy kicsit!

Gondolkodjunk együtt!

Most én adok egy forráskódot, a te feladatod az lesz, hogy kilogikázd, hogy fog kinézni a táblázat. Segítségül veheted az előző és az aktuális lapot, vagy ha másképpen nem megy, nézd meg a megoldás és a hozzá kapcsolódó animációt, majd próbáld a feladattal összevetni és megérteni az összefüggéseket.